/**
 * 酒秀
 * 9elephas.com
 */

import React, { Component } from 'react'
import { StatusBar } from 'react-native'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import Toast, { DURATION } from 'react-native-easy-toast'//toast页面
import {
    NetInfo, View, Text, StyleSheet, Platform, Image,
    TouchableOpacity, PixelRatio, TextInput, Switch
} from 'react-native';
import * as components from '../'
import * as actions from '../../actions'
var tag = 0
class ResePassWord extends Component {
    static navigationOptions = {
        title: '重置密码'
    }

    constructor(props) {
        super(props)

        this.screenId = props.screenId || 'ResePassWord'

        this.state = {
            PDpasswordSwich: true,
            PDaccountNum: null,
            PDpasswordNum: null,
            PDmessageNum: null,
            PDnewpdNum: null,
            selectProtocol:false,


        }
    }


    /**
     * 
     * 协议按钮跳转
     * 
     * @memberOf ResePassWord
     */
    consent(){
        let {navigation} = this.props
        navigation.navigate('Protocol')
        
    }

    /**
     * 
     * 选择按钮记录
     * 
     * @memberOf ResePassWord
     */
    _selectProtocolAction(){
        
        
        console.log(tag)
        if(tag % 2 === 0){
            this.setState({
                selectProtocol: true
            })
            tag++;
            console.log(this.state.selectProtocol + 'tag'+tag)
        }else{
            this.setState({
                selectProtocol:false
            })
            tag++;
            console.log(this.state.selectProtocol + 'tag'+tag)
        }
    }
    
    /**
     * 
     * 协议选择事件
     * @param {any} flag boolen类型
     * 
     * @memberOf ResePassWord
     */
    selectProtocolAction(flag){
        if(flag === false){
            return(
                <Image source = {require('../../image/selt.png')} style = {{height:24,width:24}}></Image>

            )
            
        }else{
            return(
            <Image source = {require('../../image/selected.png') } style = {{height:24,width:24}}></Image>
        )
        }
    }

    render() {
        let { navigation } = this.props

        return (
            <components.Layout
                screenId={this.screenId}
                containerStyle={{ justifyContent: 'center', backgroundColor: 'white' }}
            >


                {/* 账号  */}
                <View style={styles.inputView}>
                    <View style={[styles.view, styles.lineTopBottom]}>
                        <Text style={styles.text}>账号:</Text>
                        <TextInput
                            style={styles.textInputStyle}
                            placeholder="请输入手机号"
                            clearButtonMode="while-editing"
                            secureTextEntry={false}
                            underlineColorAndroid={'transparent'}
                            keyboardType="number-pad"
                            onChangeText={(text) => {
                                this.setState({
                                    PDaccountNum: text
                                })
                            }}
                        />
                    </View>
                </View>

                {/* 短信  */}
                <View style={styles.inputView}>
                    <View style={[styles.view, styles.lineTopBottom]}>
                        <Text style={styles.text}>账号:</Text>
                        <TextInput
                            style={styles.textInputStyle}
                            placeholder="短信验证码"
                            clearButtonMode="while-editing"
                            secureTextEntry={false}
                            underlineColorAndroid={'transparent'}
                            keyboardType="number-pad"
                            onChangeText={(text) => {
                                this.setState({
                                    PDmessageNum: text
                                })
                            }}
                        />
                        <TouchableOpacity style={{
                            backgroundColor: 'white', alignSelf: 'center'
                            , width: 80, alignItems: 'center', marginRight: 0,
                        }}>
                            <Text style={{marginTop: Platform.OS === 'ios' ? 0 : 5,
                                          marginBottom: Platform.OS === 'ios' ? 0 : -20,
                                          flex:5,textAlignVertical: 'center',}}>发送验证码</Text>
                        </TouchableOpacity>
                    </View>

                </View>


                {/* 新密码  */}
                <View style={styles.inputView1}>
                    <View style={[styles.view, styles.lineTopBottom]}>
                        <Text style={styles.text}>密码:</Text>
                        <TextInput
                            style={styles.textInputStyle}
                            placeholder="请输入新密码"
                            clearButtonMode="while-editing"
                            secureTextEntry={this.state.PDpasswordSwich}
                            underlineColorAndroid={'transparent'}
                            onChangeText={(text) => {
                                this.setState({
                                    PDnewpdNum: text
                                })
                            }}
                        />
                        <Switch
                            style={{}}
                            //动态改变value
                            value={this.state.PDpasswordSwich}
                            //当切换开关室回调此方法
                            onValueChange={(value) => { this.setState({ PDpasswordSwich: value }) }}
                        />
                    </View>
                </View>


                {/* 旧密码  */}
                <View style={styles.inputView1}>
                    <View style={[styles.view, styles.lineTopBottom]}>
                        <Text style={styles.text}>密码:</Text>
                        <TextInput
                            style={styles.textInputStyle}
                            placeholder="请输入旧密码"
                            clearButtonMode="while-editing"
                            secureTextEntry={this.state.PDpasswordSwich}
                            underlineColorAndroid={'transparent'}
                            onChangeText={(text) => {
                                this.setState({
                                    PDnewpdNum: text
                                })
                            }}
                        />
                        <Switch
                            style={{}}
                            //动态改变value
                            value={this.state.PDpasswordSwich}
                            //当切换开关室回调此方法
                            onValueChange={(value) => { this.setState({ PDpasswordSwich: value }) }}
                        />
                    </View>
                </View>

                <components.Button
                    text='确认'
                    onPress={() => navToTab(navigation)}
                    //onPress={() => this.resetstck()} 
                    containerStyle={{ marginTop: 50, marginLeft: 50, marginRight: 50 }}
                    textStyle={{ fontSize: 16 }}
                //
                />
               <View style = {{flexDirection: 'row',height: 24,backgroundColor : 'gray',
                                marginLeft: 60, marginRight:60}}>
                <TouchableOpacity style = {{height: 24,backgroundColor : 'gray',
                                marginLeft: 0, width:24    }}
                                onPress={()=>this._selectProtocolAction()}
                                >
                        {this.selectProtocolAction(this.state.selectProtocol)}
                </TouchableOpacity>
                <Text style = {{paddingTop:5}}>已阅读并同意《</Text>
                <Text style = {{paddingTop:5,color:'blue'}}
                      onPress={()=>this.consent()}
                >用户服务协议</Text>
                <Text style = {{paddingTop:5}} >》</Text>
                
                </View>



                <Toast
                    ref="toast"
                    style={{ backgroundColor: 'black' }}
                    position='top'
                    positionValue={200}
                    fadeInDuration={750}
                    fadeOutDuration={1000}
                    opacity={0.8}
                    textStyle={{ color: 'red' }}
                />
            </components.Layout>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'transparent'
    },
    title: {
        marginVertical: 5
    },
    inputView: {
        padding: 5,
        backgroundColor: '#fff',
        marginTop: 0,
        marginRight: 50,
        marginLeft: 50
    },
    inputView1: {
        padding: 5,
        backgroundColor: '#fff',
        marginTop: 10,
        marginRight: 50,
        marginLeft: 50,
    },
    text: {
        flex: 1,
        lineHeight: 44,
        fontSize: 12,
        justifyContent: 'center',
        textAlign: 'center',
        fontWeight: 'bold'
    },
    text1: {
        flex: 1,
        lineHeight: 44,
        fontSize: 12,
        justifyContent: 'center',
        textAlign: 'center',
        fontWeight: 'bold',
        marginRight: 0
    },
    view: {
        flexDirection: 'row',
        height: 44
    },
    textInputStyle: {
        flex: 5,
        marginRight: 10,
        fontSize: 15,
        marginBottom: Platform.OS === 'ios' ? 0 : -20,
        textAlignVertical: 'center',
        padding: Platform.OS === 'ios' ? 0 : 5,
        marginTop: Platform.OS === 'ios' ? 0 : 5,
    
      },
    lineTopBottom: {
        borderBottomWidth: 3 / PixelRatio.get(),
        borderColor: 'rgb(208,208,208)'
    },

})

function mapStateToProps(state) {
    return {}
}

function mapDispatchToProps(dispatch) {
    return bindActionCreators(actions, dispatch)
}

export default connect(mapStateToProps, mapDispatchToProps)(ResePassWord)
